<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="echarts.min.js"></script>
    <title></title>
</head>
<body>
<div id="chart" style="width:100%;height:100%; background-color:inherit"></div>
<script>
    var chart;
    var longPressTimer;
    var longPressDuration = 500; // 长按判定时间(毫秒)

    function initChart(xData, yData) {
        chart = echarts.init(document.getElementById('chart'));

        chart.setOption({
            backgroundColor: 'transparent',
            tooltip: { trigger: 'item',
                formatter: function(params) {
                    const formattedValue = parseFloat(params.value[1]).toFixed(2);
                    return `Avg Rssi: ${formattedValue}&nbsp;&nbsp;&nbsp;${params.name}`;
                } },
            xAxis: {
                type: 'category',
                data: xData,
                axisLabel: { rotate: 45, color: '#FFFFFF' },
                axisLine: {
                    show: true,          // 强制显示轴线
                    lineStyle: {
                        color: '#FFFFFF',// 轴线颜色
                        width: 2         // 轴线宽度
                    }
                }
            },
            yAxis: {
                    type: 'value' ,
                    axisLabel: {  color: '#FFFFFF' },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#FFFFFF',
                            width: 2
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.2)'  // 网格线颜色（半透明白色）
                        }
                    }
                },
            series: [{
                data: yData.map((v,i) => ({
                    value: [i, v],  // 使用索引对应x轴文字
                    name: xData[i]
                })),
                type: 'line',
                connectNulls: true,
                smooth: false,
                symbol: 'circle',
                symbolSize: 1,
                itemStyle: { // 设置数据点颜色
                    color: '#F4CB43'
                },
                lineStyle: { width: 1,color: '#F4CB43' },
                emphasis: {
                    itemStyle: { color: '#F4CB43' },
                    lineStyle: { width: 1 }
                },
                triggerEvent: true
            }]
        });

        chart.on('click', function(params) {
            if(window.ChartEventHandler) {
                ChartEventHandler.onEvent('click', JSON.stringify(params));
            }
        });

        // 空白区域点击处理 - 获取最近数据点
        chart.getZr().on('click', function(params) {
            const pointInPixel = [params.offsetX, params.offsetY];

            if(chart.containPixel('grid', pointInPixel)) {
                // 改用getOption()获取最新数据
                const option = chart.getOption();
                const seriesData = option.series[0].data;

                // 精确坐标转换
                const rawIndex = chart.convertFromPixel({
                    seriesIndex: 0,
                    xAxisIndex: 0
                }, pointInPixel)[0];

                const dataIndex = Math.min(
                    Math.max(0, Math.round(rawIndex)),
                    seriesData.length - 1
                );

                if(seriesData[dataIndex]) {
                     if(window.ChartEventHandler) {
                        ChartEventHandler.onEvent('click', JSON.stringify(seriesData[dataIndex]));
                    }
                }
            }
        });

        chart.getZr().on('mousedown', function(params) {
            longPressTimer = setTimeout(function() {
                var pointInPixel = [params.offsetX, params.offsetY];
                if(chart.containPixel('grid', pointInPixel)) {
                    var pointInGrid = chart.convertFromPixel('grid', pointInPixel);
                    var dataIndex = chart.convertFromPixel('series', pointInPixel)[0];
                    if(window.ChartEventHandler) {
                        ChartEventHandler.onEvent('longpress', JSON.stringify({
                            dataIndex: dataIndex,
                            x: pointInGrid[0],
                            y: pointInGrid[1]
                        }));
                    }
                }
            }, longPressDuration);
        });

        chart.getZr().on('mouseup', function() {
            clearTimeout(longPressTimer);
        });
    }

    function updateChart(newXData, newYData) {
        if(chart && !chart.isDisposed()) {
            chart.setOption({
                xAxis: { data: newXData },
                series: [{
                    data: newYData.map((v,i) => ({
                        value: [i, v],  // 使用索引对应x轴文字
                        name: newXData[i]
                    })),
                }]
            });
        }
    }

</script>
</body>
</html>
